<!--
* @author wn
* @date 2023/08/15 14:58:20
* @description: navigator 包裹 good 详情 组件封装
* interface GoodItem
!-->
<template>
	<navigator
		class="navigator-goods"
		hover-class="none"
		:url="`/pages/goods/goods?id=${good.id}`"
	>
		<image class="image" :src="good.picture"></image>
		<view class="name ellipsis">{{ good.name }}</view>
		<view class="price">
			<text class="symbol">¥</text>
			<text class="number">{{ good.price }}0</text>
		</view>
	</navigator>
</template>
<script lang="ts" setup>
defineProps<{ good: GoodItem }>()
</script>
<style lang="scss">
.navigator-goods {
	width: 344rpx;
	padding: 20rpx;
	margin-bottom: 20rpx; // 父容器 弄一个 padding-top
	border-radius: 10rpx;
	background-color: #fff;
	.image {
		width: 304rpx;
		height: 304rpx;
	}
	.name {
		height: 75rpx;
		line-height: 1.5;
		margin: 10rpx 0;
		font-size: 26rpx;
		color: #262626;
	}
	.price {
		font-size: 26rpx;
		color: $primary-price;
	}
	.symbol {
		font-size: 80%;
		margin-right: 2rpx;
	}
}
</style>
